import Login from '@/views/Login'
import React, { lazy, Suspense } from 'react'
import { Navigate } from 'react-router-dom'
const Home = lazy(() => import('@/views/Home'))
// const About = lazy(() => import('@/views/About'))
const Page1 = lazy(() => import('@/views/Page1'))
const Page2 = lazy(() => import('@/views/Page2'))
const Page301 = lazy(() => import('@/views/Page301'))
// 懒加载模式组件外部必须套一个Loading加载组件

const withLoadingComponent = (children: JSX.Element) => (
    <Suspense fallback={<div>Loading</div>}>
        {children}
    </Suspense>
)
const routes = [
    // 嵌套路由 -- 开始
    {
        path: '/',
        element: <Navigate to="/page1" />
    },
    {
        path: '/',
        element: withLoadingComponent(<Home />),
        children: [
            {
                path: '/page1',
                element: withLoadingComponent(<Page1 />)
            },
            {
                path: '/page2',
                element: withLoadingComponent(<Page2 />)
            },

            {
                path: '/page3/page301',
                element: withLoadingComponent(<Page301 />)
            },
        ]
    },
    // 嵌套路由 -- 结束

    {
        path: '/login',
        element: < Login />
    },
    //访问其余路径直接跳转到首页
    {
        path: '*',
        element: <Navigate to="/page1" />
    }
    // {
    //     path: '/about',
    //     element:  withLoadingComponent(<About />)
    // }
]
export default routes